<!-- 
说明：表单
作者：刘永盛
日期：2018-7-14 19:32:40
版本：1.0.0
-->
<template>
  <div v-auto-max-height
       v-auto-height>
    <el-form ref="form"
             v-auto-height="-65"
             :model="form"
             :label-width="ui.formLabelWidth"
             :element-loading-text="ui.loadingText"
             v-loading="ui.busying">

      <el-card class="box-card">
        <div slot="header"
             class="clearfix">
          <span style="line-height: 16px;">基础配置</span>
        </div>
        <!-- <el-row type="flex">
          <el-col :span="4">
            <mk-form-item label="提现手续费"
                          prop="TXSXF"
                          mk-inlay="price"
                          required>
              <el-input v-model="form.TXSXF">
                <template slot="append">%</template>
              </el-input>
            </mk-form-item>
          </el-col>
          <el-col :span="4">
            <mk-form-item label="最小提现金额"
                          prop="TXMIN"
                          mk-inlay="price"
                          required>
              <el-input v-model="form.TXMIN">
                <template slot="append">元</template>
              </el-input>
            </mk-form-item>
          </el-col>
          <el-col :span="4">
            <mk-form-item label="最大提现金额"
                          prop="TXMAX"
                          mk-inlay="price"
                          required>
              <el-input v-model="form.TXMAX">
                <template slot="append">元</template>
              </el-input>
            </mk-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :span="4">
            <mk-form-item label="店铺权限"
                          prop="ISOPENUSERROLE">
              <el-switch v-model="form.ISOPENUSERROLE"
                         active-value='1'
                         inactive-value='0'>
              </el-switch>
            </mk-form-item>
          </el-col>
          <el-col :span="4">
            <mk-form-item label="抽检关闭时间"
                          prop="CJGBSJ"
                          mk-inlay="plus-int"
                          required>
              <el-input v-model="form.CJGBSJ">
                <template slot="append">天</template>
              </el-input>
            </mk-form-item>
          </el-col>
        </el-row> -->
        <el-row type="flex">
          <el-col :span="4">
            <mk-form-item label="订单折扣"
                          prop="DISCOUNT"
                          mk-inlay="price"
                          required>
              <el-input v-model="form.DISCOUNT">
                <template slot="append">折</template>
              </el-input>
            </mk-form-item>
          </el-col>
          <el-col :span="4">
            <mk-form-item label="首单抽佣比例"
                          prop="FSCALE"
                          mk-inlay="price"
                          required>
              <el-input v-model="form.FSCALE">
                <template slot="append">%</template>
              </el-input>
            </mk-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="4">
            <mk-form-item label="返单抽佣比例"
                          prop="RSCALE"
                          mk-inlay="price"
                          required>
              <el-input v-model="form.RSCALE">
                <template slot="append">%</template>
              </el-input>
            </mk-form-item>
          </el-col>
          <el-col :span="4">
            <mk-form-item label="会长分佣比例"
                          prop="PRESCALE"
                          mk-inlay="price"
                          required>
              <el-input v-model="form.PRESCALE">
                <template slot="append">%</template>
              </el-input>
            </mk-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="24">
            <mk-form-item label="商品单位"
                          prop="inputValue">
              <el-tag :key="tag"
                      v-for="tag in dynamicTags"
                      closable
                      :disable-transitions="false"
                      @close="handleClose(tag)">
                {{tag}}
              </el-tag>
              <el-input class="input-new-tag"
                        v-if="inputVisible"
                        v-model="inputValue"
                        ref="saveTagInput"
                        size="small"
                        @keyup.enter.native="handleInputConfirm"
                        @blur="handleInputConfirm">
              </el-input>
              <el-button v-else
                         class="button-new-tag"
                         size="small"
                         @click="showInput">增加单位</el-button>
            </mk-form-item>
          </el-col>

        </el-row>
      </el-card>

      <mk-bottom-box align="right">
        <mk-button :type="2"
                   @click="onSubmit">保存</mk-button>
      </mk-bottom-box>
    </el-form>
  </div>
</template>
<style>
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
<script>
import { MkBase } from 'element-ui'
export default {
  name: 'cp-config-form',
  mixins: [MkBase],
  async mounted () {
    await this.loadConfigIndex()
    await this.loadCpConfigList('TMLEVEL')
    await this.loadCpConfigList('USERLEVEL')
    await this.loadCpConfigList('KFTYPE')
    await this.loadConfgArray()
    this.ui.busying = false
  },
  data () {
    const form = {}
    return {
      ui: {
        formLabelWidth: '100px',
        busying: true,
        loadingText: '加载中'
      },
      data: {
        TMLEVEL: [],
        KFTYPE: [],
        cftype: '',
        configList: []
      },
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      form
    }
  },
  methods: {
    async loadConfigIndex () {
      this.form = await this.$get(
        'cpConfig/getConfigIndex.json'
      )
      this.form.DISCOUNT = this.form.DISCOUNT * 10
      this.form.RSCALE = this.form.RSCALE * 100
      this.form.FSCALE = this.form.FSCALE * 100
      this.form.PRESCALE = this.form.PRESCALE * 100
    },
    async loadCpConfigList (cftype) {
      this.data[cftype] = await this.$get(
        'cpConfig/getConfigListByCftype.json', {cftype}
      )
    },
    async valid () {
      if (!this.validate) {
        let fn = this.$refs.form.validate
        let nodejs = false
        this.validate = this.$promise({ fn, nodejs })
      }
      return await this.validate()
    },
    async onSubmit () {
      if (await this.valid()) {
        this.busying = true
        this.loadingText = '保存中'
        let configs = []
        for (let key in this.form) {
          let element = this.form[key]
          if (key == 'FSCALE' || key == 'RSCALE' || key == 'PRESCALE') {
            element = element / 100
          }
          if (key == 'DISCOUNT') {
            element = element / 10
          }
          configs.push({'cfid': key, 'cfvalue': element})
        }
        configs.push({'cfid': 'PDUNIT', 'cfvalue': this.dynamicTags.join(',')})
        await this.$put(
          'cpConfig/saveConfigIndex.json', configs
        )
        this.busying = false
      }
    },
    async loadConfgArray () {
      let data = await this.$get(
        'cpConfig/getValue.json', {'id': 'PDUNIT'}
      )
      if (data) {
        this.dynamicTags = data.result.split(',')
      }
    },
    handleClose (tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },
    showInput () {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm () {
      let inputValue = this.inputValue
      if (inputValue) {
        let flag = true
        this.dynamicTags.forEach(str => {
          if (inputValue == str) {
            flag = false
          }
        })
        if (flag) {
          this.dynamicTags.push(inputValue)
        }
      }
      this.inputVisible = false
      this.inputValue = ''
    }
  }
}
</script>
